<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { typeOptions } from "./utils/data";
import { usePublicHooks } from "@/views/hooks";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    id: 0,
    pageType: 0,
    jobName: "",
    beanName: "",
    cronExpres: "",
    status: "",
    type: 0,
    remark: "",
    params: ""
  })
});

const formRef = ref();
const newFormInline = ref(props.formInline);
console.log(newFormInline);

const { switchStyle } = usePublicHooks();
function getRef() {
  return formRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="formRef" :model="newFormInline" :rules="formRules" label-width="82px">
    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model="newFormInline.jobName" clearable placeholder="请输入任务名称"
           />
      </el-form-item>
    </re-col>

    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="任务类型" prop="type">
        <el-select v-model="newFormInline.type" placeholder="请选择任务类型" class="w-full" clearable  :disabled="newFormInline.pageType === 2">
          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </re-col>
    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="定时规则" prop="cronExpres">
        <el-input v-model="newFormInline.cronExpres" clearable placeholder="请输入定时规则" />
      </el-form-item>
    </re-col>
    <re-col>
      <el-form-item label="调用目标" prop="beanName">
        <el-input v-model="newFormInline.beanName" placeholder="请输入调用目标" type="textarea"
           />
      </el-form-item>
    </re-col>
    <re-col>
      <el-form-item label="任务参数">
        <el-input v-model="newFormInline.params" placeholder="请输入任务参数" type="textarea" />
      </el-form-item>
    </re-col>
    <!-- <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="单次执行">
        <el-switch
          v-model="newFormInline.singleton"
          inline-prompt
          :active-value="1"
          :inactive-value="2"
          active-text="是"
          inactive-text="否"
          :style="switchStyle"
        />
      </el-form-item>
    </re-col> -->
    <re-col :value="12" :xs="24" :sm="24">
      <el-form-item label="状态">
        <el-switch v-model="newFormInline.status" inline-prompt :active-value=1 :inactive-value=2 active-text="启用"
          inactive-text="停用" :style="switchStyle" :disabled="newFormInline.pageType === 2" />
      </el-form-item>
    </re-col>
    <re-col>
      <el-form-item label="备注">
        <el-input v-model="newFormInline.remark" placeholder="请输入备注" type="textarea" />
      </el-form-item>
    </re-col>
  </el-form>
</template>
